making a good stylesheet
yeah, ive made a lot of bad websites. i mostly try to be as readable, elegant, and unintrusive to the reader as i can, rather than showing off. im trying to focus on some requirements this time around:
Table of Contents
it needs to be printable
when the user wants to print this page to paper, i strip the navigation and footer links:
@media print { nav, .status { display: none } pre { overflow: visible; } }
not much more needs to be done in this regard, since the site doesn't have a lot going on in the first place.
its meant to be downloaded
you can download any page on this site with a tool like wget. each page has a bit of inline css:
body, .string, .comment {font-family: "Iosevka"} code, pre {font-family: "IBM Plex Mono"} body { max-width: 50em; margin: auto; } hr { border: 2px solid #EEEEEE; } html { padding: 3%; } pre { overflow: auto; } a:hover { color: #338800; } pre { border-left: 3px solid #000000; padding-left: 20px; }
i try to keep this style small, so that it doesn't take up disk space. the whole site is also available in txt
format (tarball).
tty friendly
auto dark/light themes
in my style.css
file, i link to dark.css
if the user's machine has a light-mode preference:
/* load theme based on system preference */ @import url("/dark.css") (prefers-color-scheme: dark); @import url("/light.css") (prefers-color-scheme: light);
i use variables to store color names, to make creating new color themes easy. for example, light.css
looks like this:
/* light.css * dark.css looks just like this with * different colors. */ :root { --bg: #FFFFFF; --fg: #222222; --bg-dim: #DDDDDD; --fg-dim: #888888; --bold: #000000; --h1: #222222; --link: #0000BB; --link-hov: #448800; }
if the user doesn't set a preference, the default inline stylesheet is cute enough :3!
color variables
the rest of style.css
just uses these color variables and applies them throuought the site:
body { background: var(--bg); color: var(--text); } pre { background: var(--bg); color: var(--bold); } /* ... */
and so far, that's what i consider to be a good css stylesheet. i'll improve this article in the future, too <3